<template>
	<s-layout title="收藏夹" navbar="normal1">
		<!-- 导航栏 -->
    <assNavbar title="收藏夹"></assNavbar>

    <!-- 搜索栏 -->
    <su-fixed top bg="bg-white" placeholder>
      <view class="collect-search" :style="{top: statusBarHeight + 'px'}">
        <view class="search-box ss-radius-100">
          <input 
            type="text" 
            class="keyword ss-font-24" 
            @confirm="inputSearch" 
            v-model="listParams.title"
            placeholder="可输入标题搜索" 
          />
          <view class="search-btn" @tap="inputSearch">搜索</view>
        </view>
      </view>
    </su-fixed>
    

		<!-- 内容 -->
		<view class="distribution-content-box">
			<view class="distribution-content">
				<ProductCard class="product-card"
					v-for="(product, index) in state.products" 
					:key="index"
					:product="product?.goods"
					@action="handleProductAction"
				/>
			</view>
		</view>

		<uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
    <s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无数据"></s-empty>
	
	
	<!-- 铺货成功的弹框 -->
	<su-popup :show="show" type="center" round="0" :isMaskClick="true" backgroundColor="transparent" @close="handleCloseModal">
	  <view class="distribution-contents">
	    <image 
	        :src="sheep.$url.cdn('/storage/default/20250419/24e0c5fcac58943520508d742c80cc9b.png')"
	        mode="widthFix" 
	        class="modal-image" />
	    <view class="cont">
	      <view class="title">铺货成功</view>
	      <view class="content">商品已铺货，您可到铺货记录查看</view>
	    </view>
	    <view class="btns">
	      <view class="btn go-on" @tap="handleCloseModal">继续铺货</view>
	      <view class="btn go-record" @tap="goDistributionRecord">去铺货记录</view>
	    </view>
	  </view>
	</su-popup>
	</s-layout>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue'
	import {
		onLoad,
		onShow,
		onHide,
		onPageScroll,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	
	import sheep from '@/sheep';
	import assNavbar from '@/components/ass-navbar.vue';
	import ProductCard from './components/ProductCard.vue';
const show = ref(false)
	const statusBarHeight = sheep.$platform.device.statusBarHeight; // 状态栏高度
	const userInfo = computed(() => sheep.$store('user').userInfo);
	// 枚举
	const enumType = {
		quick: '快速出单好货',
		hot: '站外爆款热销',
		supplier: '严选供货商',
	}

	const state = reactive({
    keyword: '',
		type: '', // 类型名称
		pagination: {
      current_page: 1,
      last_page: 1,
      total: 0,
    },
    loadStatus: '', // 加载更多状态 ['more' | 'noMore']

		products: [
			// {
			// 	title: '暖宝宝暖贴袋鼠保暖贴暖服帖自发热鞋垫暖足贴贴暖宝宝暖贴袋鼠保暖贴暖服帖自发热鞋垫暖足贴贴',
			// 	price: '￥0.20-￥3.40',
			// 	sales: '1万+',
			// 	isAdded: false
			// },
		],
	})

	let listParams = reactive({
		title: '',
    page: 1,
    list_rows: 10, // 每页20条数据
  })

	const resetData = () => {
    state.products = []
    state.pagination = {
      current_page: 1,
      last_page: 1,
      total: 0
    }
    state.loadStatus = ''
  }

  const inputSearch = () => {
    console.log('inputSearch', state.keyword)
		listParams.page = 1
		listParams.list_rows = 10
		getListData()
  }
	const handleProductAction =async  (product) => {
		console.log('product',product)
		const res = await sheep.$api.distribution.addGoods(userInfo.value.cyq_store_id,product.id)
		if(res.error == 0){
			product.is_in = 1
			show.value = true
		} else {
			console.log('msg',res)
			uni.showToast({
				icon:'none',
				title:res.msg
			})
		}
	}
	const handleCloseModal = () => {
	  show.value = false
	}
	const goDistributionRecord = () => {
	  sheep.$router.go('/pages/distribution/record')
	  handleCloseModal()
	}
	const getListData = async () => {
		try {
      const { error, data } = await sheep.$api.distribution.getCollectList(listParams)
			console.log(data, 'data====')
      if (error == 0) {
        const { total, current_page, last_page } = data
        console.log(current_page, 'current_page')

        if (current_page === 1) {
          state.products = data.data;
        } else {
          // 如果是加载更多，则追加数据
          state.products = [...state.products, ...data.data]
        }

				console.log(state.products, 'state.products')
        

        Object.assign(state.pagination, { total, current_page, last_page })

        if (state.pagination.current_page < state.pagination.last_page) {
          state.loadStatus = 'more';
        } else {
          state.loadStatus = 'noMore';
        }

        console.log(data, '数据')
        return data.data
      }
    } catch (error) {
      throw error
    }
	}

	const loadmore = () => {
    if (state.loadStatus !== 'noMore') {
      state.pagination.current_page ++ 
      listParams.page ++ 
      getListData();
    }
  }

	onReachBottom(() => {
    console.log('触底了。')
     loadmore()
  });

	onLoad((options) => {
		console.log('onLoad', options)
		state.type = options.type
		getListData()
	})
</script>

<style lang="scss" scoped>
@import './style/list.scss';
@import './style/collect.scss';
</style>

